import {designPage} from "plain-ui-composition";
import {PlButton, PlIcon} from "plain-ui";
import {DocHomeThemes} from "../theme/theme.utils";
import {ThemeEditor} from "../../../doc/home/theme/ThemeEditPanel";
import {DocSearch} from "./DocSearch";

export const DocHomeHead = designPage(() => {
    return () => (
        <section class="doc-home-header">
            <div class="doc-home-header-leaf pl-text-primary">
                PLAIN
            </div>
            <div class="doc-home-header-center">
                <div>
                    <DocSearch/>
                </div>
                <div>
                    {DocHomeThemes.map((theme, index) => (
                        <PlButton
                            key={index}
                            style={{backgroundColor: theme.colorPrimary}}
                            onClick={() => {
                                ThemeEditor.methods.useThemeData(theme)
                            }}/>
                    ))}
                </div>
            </div>
            <div class="doc-home-header-right pl-text-primary">
                <PlIcon icon="pli-git" onClick={() => window.open('https://github.com/martSforever/plain-ui/')}/>
                <PlIcon icon="pli-gitee" onClick={() => window.open('https://gitee.com/plain-pot/plain-ui')}/>
            </div>
        </section>
    )
})
